<template>

  <div class="database-form">
    <el-form :inline="true" :model="form" class="table-info">
      <el-form-item label="表名">
        <el-input v-model="form.tableName" placeholder="表名"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="form.auth" placeholder="作者"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.desc" placeholder="描述"></el-input>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="form" class="table-info">
      <el-form-item label="字段名">
        <el-input v-model="form.field.fieldName" placeholder="字段"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.field.type" placeholder="请选择">
          <el-option
            v-for="item in type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item v-if="form.field.type === 'varchar'" label="长度">
          <el-input v-model="form.field.length" placeholder="长度"></el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.field.desc" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleField">添加字段</el-button>
        <el-button type="warning" @click="handleAddTable">添加表</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        v-for="(item, index) in table"
        :key="index"
        :prop="item.prop"
        :formatter="item.formatter? item.formatter: null"
        :label="item.label">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        >
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="warning" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: 'add',
  data () {
    return {
      api: {
        addTable: this.$api.database.addTable,
        detail: this.$api.database.detailTable
      },
      tables: [],
      form: {
        tableName: '',
        auth: '',
        desc: '',
        field: {
          type: '',
          fieldName: '',
          desc: '',
          length: '0'
        }
      },
      type: [{
        value: 'varchar',
        label: 'varchar'
      }, {
        value: 'Text',
        label: 'Text'
      }, {
        value: 'BigDecimal',
        label: 'BigDecimal'
      }, {
        value: 'Integer',
        label: 'Integer'
      }, {
        value: 'Short',
        label: 'Short'
      }, {
        value: 'Long',
        label: 'Long'
      }, {
        value: 'Date',
        label: 'Date'
      }],
      table: [
        { prop: 'fieldName', label: '字段名称' },
        { prop: 'type', label: '字段类型' },
        { prop: 'length',
          label: '字段长度',
          formatter: function (row, column) {
            if (row.length - 0) {
              return row.length
            }
            return '默认值'
          } },
        { prop: 'desc', label: '字段描述' }
      ],
      tableData: [
      ]
    }
  },
  methods: {
    onSubmit () {
      return null
    },
    handleChange (value) {
      console.log(value)
    },
    init () {
    },
    handleField () {
      this.handleDelete(this.form.field)
      this.tableData.push(JSON.parse(JSON.stringify(this.form.field)))
      this.form.field.length = '0'
    },
    handleDelete (row) {
      this.tableData.forEach((item, index) => {
        if (item.fieldName === row.fieldName) {
          this.tableData.splice(index, 1)
        }
      })
    },
    handleAddTable () {
      const jsonData = {}
      jsonData.tableName = this.form.tableName
      jsonData.auth = this.form.auth
      jsonData.desc = this.form.desc
      jsonData.fields = this.tableData
      this.$httpf({ url: this.api.addTable, json: jsonData }, data => {
        if (data.data.status === 200) {
          this.$router.back()
        }
      })
    },
    handleDetail () {
      let tableName = window.sessionStorage.tableName
      if (tableName) {
        this.$httpf({ url: this.api.detail, paras: { tableName: tableName } }, data => {
          let table = data.data.data.table
          if (table) {
            this.tableData = table.fields
            this.form.auth = table.auth
            this.form.desc = table.desc
            this.form.tableName = table.tableName
          }
        })
      }
    }
  },
  created () {
    this.handleDetail()
  }
}
</script>

<style scoped lang="less">
  .database-form {
    margin-top: 20px;
  }
  .table-info {
    margin-left: 5px;
  }

</style>
